//准备数据
let data = [
  {
    id: 1001,
    name: "张三",
    password: "1234",
    sex: "女",
    age: 28,
    date: "1991-1-1",
    checked: false,
    edit: false,
  },
  {
    id: 1002,
    name: "李四",
    password: "1234",
    sex: "男",
    age: 28,
    date: "1992-2-2",
    checked: false,
    edit: false,
  },
  {
    id: 1003,
    name: "王五",
    password: "1234",
    sex: "女",
    age: 27,
    date: "1993-3-3",
    checked: false,
    edit: false,
  },
  {
    id: 1004,
    name: "赵六",
    password: "1234",
    sex: "女",
    age: 26,
    date: "1994-4-4",
    checked: false,
    edit: false,
  },
];

let _this = this;

function submitForm() {
  $("form").addClass("dis");
  let item = {
    id: 1000 + (data.length + 1),
    name: $("#name1").val(),
    password: $("#password").val(),
    date: $("#date").val(),
    age: $("#age").val(),
    sex: $("#inputState option:selected").val(),
    checked: false,
    edit: false,
  };
  data.push(item);
  render(data);
}

$("#edit").on("click", function () {
  data.forEach(function (item, index) {
    if (item.checked) {
      item.edit = true;
    }
  });
  render(data);
});

$("#add").on("click", function () {
  $("form").removeClass("dis");
});
$("#delete").on("click", function () {
  //从data中删除
  data.forEach(function (item, index) {
    if (item.checked) {
      data.splice(index, 1);
    }
  });
  //更新render
  render(data);
});
$("#query").on("click", () => {
  //使用箭头函数解决this的问题
  let num = $("#num").val();
  let name = $("#name").val();
  console.log("num:" + num + " name:" + name);
  if (num !== "") {
    //根据工号查询
    const found = data.filter((e) => e.id == num);
    console.log(found);
    render(found);
  } else if (name !== "") {
    //根据姓名查询
    const found = data.filter((e) => e.name == name);
    render(found);
  } else {
    //查询全部
    render(data);
  }
});

/**
 * 渲染数据
 */
function render(data) {
  //清空之前的所有元素
  $("#table-body").html("");
  for (let index = 0; index < data.length; index++) {
    const e = data[index];
    let element = `
            <tr class="item">
                <th scope="row"><input type="checkbox" class="e-select" ${
                  e.checked ? "checked" : ""
                }></th>
                <td>${
                  e.edit
                    ? `<input type='text' id='eid' placeholder=${e.id}>`
                    : e.id
                }</td>
                <td>${
                  e.edit
                    ? `<input type='text' id='ename' placeholder=${e.name}>`
                    : e.name
                }</td>
                <td>${
                  e.edit
                    ? `<input type='text' id='esex' placeholder=${e.sex}>`
                    : e.sex
                }</td>
                <td>${
                  e.edit ? `<input type='password' id='epassword'>` : e.password
                }</td>
                <td>${
                  e.edit
                    ? `<input type='number' id='eage' placeholder=${e.age}>`
                    : e.age
                }</td>
                <td>${
                  e.edit
                    ? `<input type='date' id='edate' placeholder=${e.date}>`
                    : e.date
                }</td>
                ${
                  e.edit
                    ? "<td><input type='button' value='完成' id='editF'></td>"
                    : ""
                }
            </tr>`;
    $("#table-body").append(element);
  }
  initEvent();
}

function initEvent() {
  let items = $(".item");
  for (let index = 0; index < items.length; index++) {
    const item = items[index];
    //添加选中和取消事件等
    let checkbox = item.querySelector("input");
    checkbox.addEventListener("click", () => {
      let checked = checkbox.checked;
      console.log(checked);
      data[index].checked = checked;
      render(data);
    });
    //修改完成点击事件
    let editF = item.querySelector("#editF");
    editF.addEventListener("click", () => {
      let item = {
        id: $("#eid").val(),
        name: $("#ename").val(),
        password: $("#epassword").val(),
        date: $("#edate").val(),
        age: $("#eage").val(),
        sex: $("#esex").val(),
        checked: false,
        edit: false,
      };
      data.splice(index, 1, item);
      render(data);
    });
  }
}

render(data);
